<template>
	<view>
		<view class="form">
			<view class="input">
				<view class="name">头像：</view>
				<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar"></button>
				<image :src="userIfor.avatar ? userIfor.avatar : '../../../static/mine/mine_header.png'"></image>
			</view>
			<view class="right">
				<u-upload :fileList="fileList2" @afterRead="afterRead" @delete="deletePic" :previewFullImage="false" name="2" :maxCount="1"
					 uploadText="上传头像"></u-upload>
			</view>
			<view class="input">
				<view class="name">昵称：</view>
				<u--input
					placeholder="请输入姓名"
					clearable
					v-model="userIfor.nickname"
					border="none"
					placeholderStyle="{color: #c0c4cc}"
					confirmType="done"
					type="nickname"
				></u--input>
			</view>
			<view class="input">
				<view class="name">性别：</view>
				<u-radio-group v-model="userIfor.sex" placement="row">
					<u-radio key="1" label="男性" name="1" style="margin-right: 24rpx" />
					<u-radio key="2" label="女性" name="2" />
				</u-radio-group>
			</view>
		</view>
		<view class="btn" @click="saveupdateInfo">保存</view>
	</view>
</template>

<script>
import { userget, update, commonUpload } from '@/api/mine.js';
export default {
	data() {
		return {
			userIfor: [],
			fileList2:[]
		};
	},
	onLoad() {
		this.get_userIfor();
	},
	methods: {
		onChooseAvatar(e) {
			commonUpload({ url: e.detail.avatarUrl }).then((res) => {
				if(res.code=='0'){
					this.userIfor.avatar = res.data;
					this.saveupdateInfo();
				}else{
					uni.$u.toast('上传失败')
				}
			});
		},
		saveupdateInfo() {
			if (this.fileList2.length > 0) {
				this.userIfor.avatar = this.fileList2[0].url
			}
			update(this.userIfor).then((res) => {
				uni.$u.toast('保存成功');
				this.get_userIfor();
			});
		},
		get_userIfor() {
			userget().then((res) => {
				this.userIfor = res.data;
				this.userIfor.sex = JSON.stringify(this.userIfor.sex);
			});
		},
		// 删除图片
		deletePic(event) {
			this[`fileList${event.name}`].splice(event.index, 1)
		},
		// 新增图片
		async afterRead(event) {
			// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
			let lists = [].concat(event.file)
			let fileListLen = this[`fileList${event.name}`].length
			lists.map((item) => {
				this[`fileList${event.name}`].push({
					...item,
					status: 'uploading',
					message: '上传中'
				})
			})
			for (let i = 0; i < lists.length; i++) {
				const result = await this.uploadFilePromise(lists[i].url)
				let item = this[`fileList${event.name}`][fileListLen]
				this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
					status: 'success',
					message: '',
					url: result
				}))
				fileListLen++
			}
		},
		uploadFilePromise(url) {
			return new Promise((resolve, reject) => {
				let a = commonUpload({url:url}).then((res) => {
					if(res.code=='0'){
						setTimeout(() => {
							resolve(res.data)
						}, 50)
					}else{
						uni.$u.toast('上传失败')
					}
				});
			})
		},
	}
};
</script>

<style lang="scss">
page {
	background-color: #f9f9f9;
}
/deep/ .u-radio {
	margin-right: 24rpx;
}

.form {
	background-color: #fff;
	margin: 24rpx;
	padding: 24rpx;
	position: relative;
	.input {
		display: flex;
		line-height: 44rpx;
		padding: 24rpx 0;
		position: relative;
		.name {
			width: 180rpx;
		}
		image {
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
		}
		.avatar-wrapper {
			width: 100%;
			height: 100%;
			opacity: 0;
			position: absolute;
		}
	}
	.right{
		position: absolute;
		right: 24rpx;
		top: 24rpx;
	}
}

.btn {
	margin: 64rpx;
	height: 88rpx;
	background: #39488a;
	border-radius: 20rpx;
	color: #fff;
	text-align: center;
	line-height: 88rpx;
}
</style>